<template>
    <div class="footprint-container">
        <!-- Header -->
        <div class="ls-card">
            <el-alert
                :title="$t('温馨提示：设置中的足迹气泡开关是整个气泡的总开关,如果这里关了则任何地方都不显示气泡。')"
                type="info"
                show-icon
                :closable="false"
            />
            <div class="m-t-16">
                <el-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    inline
                    label-width="80px"
                    size="small"
                >
                    <!-- Bubble Status -->
                    <el-form-item :label="$t('气泡状态')">
                        <el-switch
                            v-model="form.status"
                            :active-color="styleConfig.primary"
                            inactive-color="#f4f4f5"
                            :active-value="1"
                            :inactive-value="0"
                        />
                    </el-form-item>
                    <!-- Bubble Duration -->
                    <el-form-item
                        :label="$t('气泡时长')"
                        prop="duration"
                    >
                        <el-input
                            type="number"
                            :min="0"
                            v-model="form.duration"
                            prefix-icon="el-icon-time"
                            style="width: 180px"
                        >
                            <template slot="append">/{{$t('分钟')}}</template>
                        </el-input>

                    </el-form-item>
                    <el-form-item class="m-l-20">
                        <el-button
                            size="small"
                            type="primary"
                            @click="onSaveFootprintConfig('form')"
                        >{{$t('保存')}}
                        </el-button>
                        <el-button
                            size="small"
                            @click="getFootprintData"
                        >{{$t('重置')}}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- Content -->
        <div class="ls-card m-t-16">
            <div class="footprint__content">
                <div
                    class="footprint__item"
                    v-for="item in footprintModuleList"
                    :key="item.id"
                >
                    <div class="footprint__item-title">{{ item.name }}</div>
                    <div class="footprint__item-content">{{ item.template }}</div>
                    <div class="footprint__item-function">
                        <el-radio-group
                            v-model="item.status"
                            size="small"
                            @change="changeFootprintModuleStatus(item.id, $event)"
                        >
                            <el-radio-button label="1">{{$t('开启')}}</el-radio-button>
                            <el-radio-button label="0">{{$t('关闭')}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import {Component, Vue} from 'vue-property-decorator'
import {
    apiFootprintList,
    apiFootprintEdit,
    apiFootprintSetting
} from '@/api/marketing/index'

interface Form {
    duration: number
    status: number
}

@Component
export default class Footprint extends Vue {
    form: Form = {
        duration: 0,    // 气泡时长
        status: 0,      // 气泡状态
    }

    // 气泡模块列表
    footprintModuleList: Array<object> = []

    // 表单验证
    rules: object = {
        duration: [
            {
                validator: (rule: any, value: any, callback: any): any => {
                    return value && (value * 1 >= 0)
                        ? callback()
                        : callback(new Error())
                },
                message: i18n.t('必填项不可为空'),
            },
        ],
    }

    /** S Methods **/

    // 获取足迹配置信息
    getFootprintData(): void {
        apiFootprintList().then(res => {
            const config = res.config
            this.footprintModuleList = res.lists
            this.$set(this.form, 'status', config.footprint_status)
            this.$set(this.form, 'duration', config.footprint_duration)
        })
    }

    // 足迹模块状态被改变
    changeFootprintModuleStatus(identity: number, value: number): void {
        apiFootprintEdit({
            id: identity,
            status: value,
        })
            .then(() => {
                this.$message.success(i18n.t('修改成功'))
            })
            .catch(() => {
                this.$message.error(i18n.t('修改失败'))
                // 重置回开关
                const itemAction: any = this.footprintModuleList.find(
                    (item: any) => item.id === identity
                )
                const status = itemAction.status * 1 === 1 ? 0 : 1
                // 延时500ms --> 优化交互体验、视觉感观
                setTimeout(() => (itemAction.status = status), 500)
            })
    }

    // 点击足迹配置保存按钮
    onSaveFootprintConfig(formName: string) {
        const ref = this.$refs[formName] as HTMLFormElement

        ref.validate((valid: boolean) => {
            apiFootprintSetting({
                duration: this.form.duration,
                status: this.form.status
            }).then(() => {
                this.$message.success(i18n.t('修改成功'))
            }).catch(() => {
                this.$message.error(i18n.t('修改失败'))
                this.getFootprintData()
            })
        })
    }

    /** E Methods **/

    /** Life Cycle **/
    created() {
        // 初始化数据
        this.getFootprintData()
    }
}
</script>


<style lang="scss" scoped>
.footprint-container {
    .footprint__content {
        display: flex;
        flex-wrap: wrap;
    }
}

.footprint__item {
    width: 300px;
    padding: 20px;
    margin: 0 24px 24px 0;
    border-radius: 8px;
    border: 1px solid $--border-color-base;

    &-title {
        font-size: 18px;
        color: $--color-primary;
    }

    &-content {
        box-sizing: border-box;
        height: 180px;
        padding: 16px;
        margin: 18px 0;
        border-radius: 8px;
        font-size: 14px;
        background-color: #efefef;
        color: $--color-text-primary;
    }

    &-function {
        text-align: center;
    }
}
</style>